<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=urf-8">
<title>零售管理-修改短信模板</title>
	<%@include file="../include/include.jsp"%>
	<link rel="stylesheet" type="text/css" href="${csspath}/public.css"/>
	<link rel="stylesheet" type="text/css" href="${csspath}/datepicker.css"/>
	<link rel="stylesheet" type="text/css" href="${csspath}/style_l.css"/>
	<script src="${jspath}/jquery/jquery-1.4.4.js" type="text/javascript"></script>
	<script type="text/javascript" src="${jspath}/jquery/jquery.ui.min.js"></script>
	<script type="text/javascript" src="${jspath}/ui.datepicker_zh-CN.js"></script>
	<script type="text/javascript" src="${jspath}/jquery/jquery.blockUI.js"></script>
	<script type="text/javascript" src="${jspath}/public.js"></script>
	<script type="text/javascript" src="${jspath}/jquery/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="${jspath}/jquery/jquery.alerts.js"></script>
	<link rel="stylesheet" type="text/css" href="${csspath}/jquery.alerts.css" />
	
	<script src="${jspath}/jquery/validate/jquery.validationEngine.js" type="text/javascript"></script>
<script src="${jspath}/jquery/validate/jquery.validationEngine-zh.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="${webcontext}/css/validationEngine.jquery.css"/>
<link rel="stylesheet" type="text/css"
	href="${bootstrapPath}/css/bootstrap.css" />
<script type="text/javascript" src="${bootstrapPath}/js/bootstrap.js"></script>
<script type="text/javascript"
	src="${bootstrapPath}/js/bootstrap3-validation.js"></script>
	
	<script type="text/javascript">
	function search(){
		document.getElementById("detailVarform").submit();
	}
	</script>
	<script type="text/javascript">
		$(function() {
			
			//选中后该行高亮
			$('#data_tab tr').bind('click', function() {
				 if(window.cur) window.cur.style.background = "";  
				 if(window.cur) window.cur.style.fontWeight = "normal";  
		         this.style.background = "#e8e8e8";
		         this.style.fontWeight = "bold";
		         window.cur = this; 
			});
			
			// 设置鼠标点击行时选中改行第一列的单选按钮
			$("#data_tab tr").click(function(){
				$(this).find("td input[type='radio']").attr("checked",true);
				$(this).find("td input[type='radio']").click();
			});
			$("#detail_form").validationEngine({scroll:false});


			$("#area").change(function() {
				var v = $(this).val();
				if(v=="1") {
					$("input[name='rfsIds']:checkbox").attr("class","validate[minCheckbox[1]]");
					$("#hide_div").show();
				}else {
					$("input[name='rfsIds']:checkbox").attr("checked",false);
					$("input[name='rfsIds']:checkbox").attr("class","");
					$("#hide_div").hide();
				}
			});
			$("#okBut").click(function(){
				if(!compareDate("effectiveDate", "expiryDate", "expiryDate", '失效日期必须晚于生效日期')){
					return;
				}	
				if($("#detail_form").validationEngine({returnIsValid:true})){
					jConfirm("确认修改此短信模板？","操作提示",function(result){
						if(result == true){
							$("#detail_form").submit();
						}
					});
				}
			});

			$("#state").change(function() {
				if($(this).val()!="1") {
					$("#hide_divtime").slideUp();
					$("#scheduled").removeClass("validate[custom[dayOfHours]]");
				}else {
					$("#hide_divtime").slideDown();
					$("#scheduled").addClass("validate[custom[dayOfHours]]");
				}
			});
			$("#toListBut").click(function(){
				$("#listform").submit();
			});

			$(".add").click(function(){
				var radioVal = $("input[name='variableRadio']:radio:checked").val();
				if (radioVal != undefined) {
					//$("#variablelist").append("<input type='hidden' name='variables' value="+radioVal+" />");
					var tc = document.getElementById("msgContent");
					var tclen = tc.value.length;
					tc.focus();
					if(typeof document.selection!="undefined"){
						document.selection.createRange().text=radioVal;
					}else{
						tc.value=tc.value.substr(0,tc.selectionStart)+radioVal+tc.value.substring(tc.selectionStart,tclen);
					}
				}else{
					jAlert("请选择变量！","提示信息");
				}
			});
		});
	</script>
</head>
<body>
<form:form id="listform" action="${webcontext}/sms/backtoquerysmstemplates" method="post" modelAttribute="queryDto"></form:form>
	<!-- content -->
	<div id="content">
		<!-- wrap -->
		<div id="wrap">
<form:form id="detail_form" action="${webcontext}/sms/updatesmstemplate" method="post" modelAttribute="detailDto">
			<!-- breadcrumb -->
			<div id="breadcrumba" style="color: #025D7B; height: 26px; line-height: 26px;">
				<span>设置</span>
				<span>&gt;</span>
				<span>修改短信模板</span>
			</div>
			<!-- /breadcrumb -->
            
			<!-- input_div -->
			<div class="input_div">
				<div class="title">
					<span>修改短信模板</span>
				</div>
				<div class="spliter h_5"></div>
				<table class="input_tab">
					<tr>
						<td style="width: 120px;padding-left: 5px;">短信模板编号：</td>
						<td>
							<!-- <select class="sel" name="templateCode">
                                <option value=""></option>
                                <option value="1">名称1</option>
                                <option value="2">名称2</option>
                                <option value="3">名称3</option>
                                <option value="4">名称4</option>
							</select> -->
							<form:input path="templateCode" readonly="true" cssClass="text longer"/>
							<form:hidden path="id"/>
						</td>
						<td class="label">&nbsp;</td>
						<td>&nbsp;</td>
						<td class="label">&nbsp;</td>
						<td>&nbsp;</td>
						<td class="label">&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
                    <%-- <tr>
						<td class="label">发送时间类型：</td>
						<td>
							<form:select path="sendType" cssClass="sel" id="state">
								<form:options items="${sendTypeList}"/>
							</form:select>
						</td>
                        <td colspan="2">
                        <core:set var="dis"></core:set>
                        <core:if test="${detailDto.sendType==1}">
                        	<core:set var="dis" value="display:block"></core:set>
                        </core:if>
                        <core:if test="${detailDto.sendType==2}">
                        	<core:set var="dis" value="display:none"></core:set>
                        </core:if>
	                       <table id="hide_divtime" style="${dis }">
							<td class="label"><font class="star_red">*</font>预定发送时间：</td>
							<td>
							 <core:if test="${detailDto.sendType==1}">
								<form:input id="scheduled" path="scheduledSendTime"  cssClass="validate[custom[dayOfHours]]"/>
							</core:if>
							 <core:if test="${detailDto.sendType==2}">
							  	<form:input id="scheduled" path="scheduledSendTime"/>
							  </core:if>	
							</td>
	                        </table>
                        </td>
						<td class="label"><font class="star_red">*</font>生效日期：</td>
						<td>
							<!-- <input type="text" class="text date" name="effectiveDate" value="<fmt:formatDate value="${detailDto.effectiveDate }" pattern='yyyy-MM-dd'/>"> -->
							<form:input path="effectiveDate" cssClass="validate[required,custom[date]] text date"/>
						</td>
						<td class="label"><font class="star_red">*</font>失效日期：</td>
						<td>
							<!-- <input type="text" class="text date" name="expiryDate" value="<fmt:formatDate value="${detailDto.expiryDate }" pattern='yyyy-MM-dd'/>"> -->
							<form:input path="expiryDate" cssClass ="validate[required,custom[date]] text date"/>
						</td>
					</tr> --%>
					<tr>
						<%-- <td class="label"><font class="star_red">*</font>作用范围：</td>
						<td>
							<form:select path="effectScope" cssClass="sel"  id="area">
								<form:options items="${templateScope}"/>
							</form:select>
							
						</td> --%>
						<td style="width: 120px;padding-left: 5px;">短信模板名称：</td>
						<td colspan="5">
						<!-- 	<input type="text" name="messageTemplateComments" class="text longer" value="${detailDto.messageTemplateComments }"/> -->
							<form:input path="messageTemplateComments" cssClass="validate[optional,length[0,255]] text longer"/>
						</td>
					</tr>
					<tr>
						<td style="width: 120px;padding-left: 5px;">短信模板说明：</td>
						<td colspan="5">
							<form:input path="templateComments" cssClass="validate[optional,length[0,255]] text longer"/>
						</td>
					</tr>
					<tr>
						<td style="width: 120px;padding-left: 5px;"><font class="star_red">*&nbsp;</font>短信内容：</td>
						<td colspan="7">
							
							<div class="spliter h_1"></div>
							<!-- <textarea id="msgContent"  name="messageContent" class="textareaWidth773 textareaHeight30">${detailDto.messageContent }</textarea> -->
							<form:textarea id="msgContent" path="messageContent" cssClass="validate[required,length[0,500]] textareaWidth773 textareaHeight30"/>
						<!-- 	<div style="display: none;" id="variablelist"></div> -->
						</td>
					</tr>
				</table>
				<div class="spliter h_5"></div>
			</div>
			<!-- /input_div -->
			<core:if test="${detailDto.effectScope==0}">
				<core:set value="display:none;" var="displayDiv"></core:set>
			</core:if>
            <div id="hide_div" style="${displayDiv}">
				<div class="spliter h_5"></div>
				<div class="data_div">
					<table class="data_tab">
						<tr>
							<th class="w_5">
								<input type="checkbox" id="check_all"/>
							</th>
							<th>大区代码</th>
							<th>大区名称</th>
						</tr>
						<core:if test="${detailDto.effectScope==0}">
							<core:set value="" var="cssClass"></core:set>
						</core:if>
						<core:if test="${detailDto.effectScope==1}">
							<core:set value="validate[minCheckbox[1]]" var="cssClass"></core:set>
						</core:if>
						<core:forEach items="${rfsList}" var="rfs" varStatus="vs">
							<core:set var="checkedVal" value="" ></core:set>
							<core:forEach items="${codeTemplates }" var="templateScope">
                                    <core:if test="${rfs.id == templateScope.effectScopeOrgId }">
                                    		<core:set var="checkedVal" value="checked='checked'" ></core:set>
                                    </core:if>
                             </core:forEach>
							<tr>
								<td class="align_m">
									<input id="rfs${vs.index}" class="${cssClass}"  type="checkbox" name="rfsIds" value="${rfs.id }" ${checkedVal } />
								</td>
								<td>${rfs.orgCode }</td>
								<td>${rfs.orgName }</td>
							</tr>
						</core:forEach>
					</table>
				</div>
			</div>
            <div class="spliter h_10"></div>
            <!-- data_div -->
            </form:form>
<form:form id="detailVarform" class="form-horizontal" action="${webcontext}/sms/getVariableByPaging" method="post" modelAttribute="variableDto">
            <div class="page_div">
				<div class="page_info">
					<a class="add">添加到短信内容</a>
				</div>
			</div>
			<div class="data_div">
			<form:hidden path="id"/>
			<form:hidden path="templateCode" value="${detailDto.templateCode}"/>
				<table id="data_tab" class="table table-hover">
					<tr>
						<th class="w_5">选择</th>
						<th>变量</th>
						<th>描述</th>
						<!-- <th class="w_10">类型</th> -->
					</tr>
					<core:forEach items="${variableList}" var="variable">
						<tr>
							<td class="align_m">
								<input type="radio" name="variableRadio" value="${variable.variableName }"/>
							</td>
							<td class="align_m">${variable.variableName }</td>
							<td>${variable.description }</td>
							<%-- <td>${variable.variableType }</td> --%>
						</tr>
					</core:forEach>
				</table>
      </div>
            <div class="page_div">
				<%@include file="../common/page.jsp"%>
			</div>
			<!-- /data_div -->
</form:form>			
			
			<div class="spliter h_5"></div>
			<div class="btn_div">
				<button id="okBut" type="button" class="btn" value="确认" ><i class="glyphicon glyphicon-ok" style="color:#FFFFFF"></i>&nbsp;确认</button>
				<button id="toListBut" type="button" class="btn" value="取消" ><i class="glyphicon glyphicon-remove" style="color:#FFFFFF"></i>&nbsp;取消</button>
			</div>

		</div>
		<!-- /wrap -->
	</div>
	<!-- /content -->
</body>
</html>